﻿@section header
{

    <link href="~/Themes/RongJi/Style/plugins/qTip2/jquery.qtip.min.css" rel="stylesheet">
    <link href="~/Themes/RongJi/Style/plugins/bellows-2.0.0/bellows.min.css" rel="stylesheet">
    <link href="~/Themes/RongJi/Style/base/css/list.css" rel="stylesheet">
}
@using Kevin.Shop.Business.Service.Entity.Helper
@model RiderShop.Mobile.Modle.Product.ProductListModel

<div id="equalize">
    <div class="col-left">
        <div class="innerL">
            @Html.Action("CategoryList", "Sort")
            <dl class="hot-sales-list">
                <dt>热销榜</dt>
                @*<dd class="no-hot-sales">暂无热销记录</dd>*@
                <dd>
                    <ul>

                        @foreach (var hot in RiderShop.Mobile.Modle.Product.ProductListModel.GetHotProducts())
                        {
                            <li>
                                <div><a href="/Product/ProductDetail?prd=@hot.ProductId"><img src="@hot.ImageNameSize125" alt=""></a></div>
                                <a href="/Product/ProductDetail?prd=@hot.ProductId">@hot.Title<span>@hot.LineDescription</span></a>
                                <p class="price">现价:￥@hot.UnitPriceFormat</p>
                            </li>
                        }


                    </ul>
                </dd>
            </dl>
            @*<dl class="view-recent">
                    <dt>最近浏览</dt>
                    <dd class="no-view-recent">暂无浏览记录</dd>
                    <dd>
                        <ul>
                            <li>
                                <div><a href=""><img src="../../tmp/l1.jpg" alt=""></a></div>
                                <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                                <p class="price">现价:￥11.00</p>
                            </li>
                            <li>
                                <div><a href=""><img src="../../tmp/l1.jpg" alt=""></a></div>
                                <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                                <p class="price">现价:￥11.00</p>
                            </li>
                            <li>
                                <div><a href=""><img src="../../tmp/l1.jpg" alt=""></a></div>
                                <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                                <p class="price">现价:￥11.00</p>
                            </li>
                            <li>
                                <div><a href=""><img src="../../tmp/l1.jpg" alt=""></a></div>
                                <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                                <p class="price">现价:￥11.00</p>
                            </li>
                            <li>
                                <div><a href=""><img src="../../tmp/l1.jpg" alt=""></a></div>
                                <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                                <p class="price">现价:￥11.00</p>
                            </li>
                        </ul>
                    </dd>
                </dl>*@
        </div>
        <div class="blank"></div>
    </div>
    <div class="col-right">
        <header class="product-list-top-header">
            @if (Model.ProductBanner != null)
            {
                <div class="banner">
                    <a href="@Model.ProductBanner.NavigateUrl">
                    <img src="@Model.ProductBanner.ActualImageUrl" alt="">
                    </a>
                </div>
            }
        </header>
        @if (Model.Result == null || Model.Result.Data == null || Model.Result.Data.Count == 0)
        {
            if (string.IsNullOrEmpty(Model.Keyword))
            {
                <h3 class="notingFind">十分抱歉，暂时没有相关的商品, 请先看看下面我们推荐的吧。</h3>
            }
            else
            {
                <h3 class="notingFind">十分抱歉，暂时没有与 <strong class="red">"@Model.Keyword"</strong> 的相关的商品, 请先看看下面我们推荐的吧。</h3>
            }
            <div class="category-recommended">
                <span class="t"></span>
                <ul>
                    @foreach (var sug in RiderShop.Mobile.Modle.Product.ProductListModel.GetSuggestProducts())
                    {
                        <li>
                            <span class="r_img"><a href="/Product/ProductDetail?prd=@sug.ProductId"><img src="@sug.ImageNameSize125" alt=""></a></span>
                            <span class="l_t">
                                <h4><a href="/Product/ProductDetail?prd=@sug.ProductId">@(sug.Title.Length > 40 ? sug.Title.Substring(0, 30) : sug.Title)</a></h4>
                                <p class="r_price">
                                    ￥@sug.UnitPriceFormat
                                    <a href="/Product/AddToCart?prd=@sug.ProductId" target="_blank" class="r_buyBtn" pid="@sug.ProductId" onclick="productList.AddToCart(this);">立即购买</a>
                                </p>
                            </span>
                        </li>

                    }

                </ul>
            </div>
        }
        else
        {

            <div class="product-list">
                <header class="product-list-header">
                    <i class="cate_@Model.Category.CategoryId">@Model.Category.CategoryName</i>
                    <h2>@Model.Category.CategoryName</h2>
                    <span>相关商品 <em>@Model.TotalCount</em> 款</span>
                    <ul id="view-switcher">
                        <li class="fa fa-th-large" title="网格视图" id="show-grids"></li>
                        <li class="fa fa-bars" title="列表视图" id="show-lists"></li>
                    </ul>
                </header>
                <div id="product-filters" class="product-filters">
                    <div class="filter-inner-wrapper">
                        <div class="sorters">
                            <ul>
                                <li id="title">排序</li>
                                <li id="by-default" class="byItem selected" order="">默认</li>
                                <li id="by-time" class="byItem" order="1"><i class=""></i>时间</li>
                                <li id="by-price" class="byItem" order="0"><i class=""></i>价格</li>
                                <li id="by-sales" class="byItem" order="3"><i class=""></i>销量</li>
                                <li id="by-comments" class="byItem" order="2"><i class=""></i>评论</li>
                                <li>
                                    <label>
                                        @if (Request.QueryString["hi"] == "1")
                                        {
                                            <input type="checkbox" id="chkInstock" checked="checked">
                                        }
                                        else
                                        {
                                            <input type="checkbox" id="chkInstock">
                                        }
                                        仅显示现货商品
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="btn-pagers">
                            <ul>
                                <li id="pre" class="disabled"><i class="fa fa-angle-left">上一页</i></li>
                                <li id="pageNum"><span id="currentPage">1</span>/<span id="totalPages">@Model.TotalPage</span></li>
                                <li id="next" class=@(@Model.TotalPage > 1 ? "buttons" : "disabled")>下一页 <i class="fa fa-angle-right"></i></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="product-list">
                    @Html.Partial(string.Format("~/Themes/{0}/Views/Product/ProductListPartial.cshtml", WebClientContext.Current.SiteTheme))
                    @*@Html.Action("ProductListPartial", "Product", new { keyword = Request.QueryString["keyword"], sid = Request.QueryString["sid"] })*@
                </div>
            </div>
        }
    </div>
</div>
<input type="hidden" id="sid" value="@Request.QueryString["sid"]" />
<input type="hidden" id="keyword" value="@Request.QueryString["keyword"]" />
<input type="hidden" id="page" value="@Request.QueryString["page"]" />
<input type="hidden" id="order" value="@Request.QueryString["order"]" />
<input type="hidden" id="sort" value="@Request.QueryString["sort"]" />

@section footer
{
    <script src="~/Themes/RongJi/Style/plugins/imagesloaded.min.js"></script>
    <script src="~/Themes/RongJi/Style/plugins/qTip2/jquery.qtip.min.js"></script>
    <script src="~/Themes/RongJi/Style/plugins/jquery.zoomImgRollover.js"></script>
    <script src="~/Themes/RongJi/Style/plugins/bellows-2.0.0/velocity.min.js"></script>
    <script src="~/Themes/RongJi/Style/plugins/bellows-2.0.0/bellows.min.js"></script>
    <script src="~/Themes/RongJi/Style/base/js/list.js"></script>
    <script>
        var productList = {
            isLoading: false,
            RefreshList: function () {
                var url = "/Product/ProductList?";
                if ($("#sid").val()) { url += ("sid=" + $("#sid").val() + "&"); }
                if ($("#keyword").val()) { url += ("keyword=" + $("#keyword").val() + "&"); }
                if ($("#page").val()) { url += ("page=" + $("#page").val() + "&"); }
                if ($("#order").val()) { url += ("order=" + $("#order").val() + "&"); }
                if ($("#sort").val()) { url += ("sort=" + $("#sort").val() + "&"); }

                productList.isLoading = true;

                $.ajax({
                    type: "get",
                    url: url,
                    beforeSend: function (XMLHttpRequest) {
                        KevinShop.Common.Loading.show();
                    },
                    success: function (html) {
                        productList.isLoading = false;
                        $("#product-list").html(html);
                        //window.location.href = "#" + url.substr(11,url.length-10);
                        switchViewStyle();
                        imagesLoaded('.product-list-body', RerenderProList());
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        productList.isLoading = false;
                        //HideLoading();
                        KevinShop.Common.Loading.hide();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        productList.isLoading = false;
                        //请求出错处理
                        alert(textStatus);
                        KevinShop.Common.Loading.hide();
                    }
                });

                this.RefreshHeaderPage();
            },
            RefreshHeaderPage: function () {
                var page = parseInt($("#page").val() || 0);
                $("#currentPage").html(page + 1);

                var totalPage = parseInt($("#totalPages").html() || 0);

                if (page === 0) {
                    $(".btn-pagers #pre").removeClass("buttons").addClass("disabled");
                }
                else {
                    $(".btn-pagers #pre").removeClass("disabled").addClass("buttons");
                }

                if (page + 1 === totalPage) {
                    $(".btn-pagers #next").removeClass("buttons").addClass("disabled");
                }
                else {
                    $(".btn-pagers #next").removeClass("disabled").addClass("buttons");
                }
            },
            AddToCart: function (cart) {
                var productId = $(cart).attr("pid");
                KevinShop.Common.ShoppingCart.UpdateToCart(productId, 1);
                //KevinShop.MessageBox.Success("添加到购物车成功！");
                $(cart).siblings('.tips').text('添加到购物车成功').fadeIn().delay(500).fadeOut();

            }
        };

        $(function () {
            $('[title]').qtip({
                position: {
                    target: 'mouse',
                    adjust: { x: 15, y: 15, mouse: true }
                }
            });

            $(".sorters .byItem").click(function () {

                if (productList.isLoading) {
                    return;
                }

                var clicked_li = $(this);
                var order = clicked_li.attr("order");
                var selected_li = $(".sorters .byItem[class*='selected']");
                var selected_oreder = selected_li.attr("order");
                if (order === "" && selected_oreder === "") {
                    return;
                }

                var sort = 0;
                if (order !== "") {
                    var li_i = clicked_li.children("i");
                    if (li_i.attr('class').indexOf("fa-caret-down") > 0) {
                        sort = 1;
                    }
                }
                $("#order").val(order);
                $("#sort").val(sort);
                $("#page").val(0);
                productList.RefreshList();

                selected_li.removeClass("selected");
                clicked_li.addClass("selected");
                if (selected_oreder !== "") {
                    selected_li.children("i").removeClass();
                }
                if (order !== "") {
                    clicked_li.children("i").addClass(sort === 1 ? "fa fa-caret-up caret" : "fa fa-caret-down caret");
                }
            });

            //pre page
            $(".btn-pagers #pre").click(function () {

                if (productList.isLoading) {
                    return;
                }

                var page = parseInt($("#page").val() || 0)
                if (page === 0) {
                    return;
                }
                $("#page").val(--page);
                productList.RefreshList();
                productList.RefreshHeaderPage();

            });

            //next page
            $(".btn-pagers #next").click(function () {

                if (productList.isLoading) {
                    return;
                }

                var page = parseInt($("#page").val() || 0);
                var totalPage = parseInt($("#totalPages").html());
                if (page + 1 >= totalPage) {
                    return;
                }
                $("#page").val(++page);
                productList.RefreshList();

            });

            //change page
            $(".listPager .item").on('click', function () {

                if (productList.isLoading) {
                    return;
                }

                var pageIndex = $(this).attr("pageindex");
                if (pageIndex) {
                    $("#page").val(pageIndex);
                    productList.RefreshList();
                    window.location.href = "#product-filters";
                }
            });

            $("#chkInstock").change(function () {
                var hi = "0";
                if ($("#chkInstock").prop("checked")) {
                    hi = "1";
                }
                else {
                    hi = "0";
                }

                var url = "/Product/ProductList?";
                if ($("#sid").val()) { url += ("sid=" + $("#sid").val() + "&"); }
                if ($("#keyword").val()) { url += ("keyword=" + $("#keyword").val() + "&"); }
                url += ("hi=" + hi);
                window.location.href = url + "#product-filters";

            });
        });
    </script>
}